<template>
  <el-menu
    :default-active="$route.Path"
    :unique-opened="true"
    collapse-transition
    router
    class="el-menu-vertical-demo"
    text-color="#000"
    active-text-color="#347fff"
  >
    <!-- <div class="flood">
      <router-link class="flood-son" to="/flood">防汛指挥模式</router-link>
    </div> -->

    <!-- <NavMenu :navMenus="treeData"></NavMenu> -->
    <NavMenu :navMenus="menuData"></NavMenu>
  </el-menu>
  <!-- <div> {{ $route.path}}</div> -->
</template>

<script>
import NavMenu from "./NavMenu.vue";
import { menuData, menuData1, menuData2 } from "./menulist.js";
export default {
  name: "Aside",
  components: { NavMenu },
  data() {
    return {
      jurisdiction: localStorage.getItem("jurisdiction"), //权限\
      list: [],
      path: "",
      gateNumber: 1,
      roleId: localStorage.getItem("id")

      // treeData:this.$store.state.menuInfo,
      // treeData: JSON.parse(localStorage.getItem("tree")),
    };
  },
  methods: {
    select(val) {
      console.log(val);
    },
    names(name) {
      console.log("werwer", name);
      this.$router.push(name);
    },
    onMenu(val) {
      console.log(val, "xxxx");
    },
    //路由传值
    searchVideo(item) {
      this.gateNumber = item.num;
      this.$router.push({
        path: "/home/surveillance",
        query: {
          nameId: item.name,
          addressCode: item.addressCode,
          number: item.gateNumber,
          type: item.type,
          companyId: item.companyId
        }
      });
    },
    //监听router的事件
    parentMsg(path) {
      // console.log(path);
      this.keyValue = path;
    },
    //展开
    // handleOpen(key, keyPath) {
    //   this.$router.push(key);
    //   this.keyValue = key;
    //   // console.log(2);
    // },
    selectOpen(key, keyPath) {
      this.keyValue = key;
      // console.log(1);
    },
    //获取权限
    getJurisdiction() {
      this.$http.post("menu/menuAll").then(res => {
        console.log(res);
        localStorage.setItem("jurisdiction", res.data);
      });
    }
  },
  computed: {
    active() {
      return this.$route.path.replace("/", "");
    },
    treeData() {
      return JSON.parse(localStorage.getItem("tree")) || [];
      // return this.$store.getters.menuRoutes
    },
    menuData() {
      if (this.roleId == 1) {
        return menuData;
      }
      //积水点
      if (this.roleId == 6||this.roleId == 7) {
        return menuData1;
      }
      if (this.roleId == 5) {
        return menuData2;
      }
    }
  },
  created() {
    // this.getJurisdiction();
    this.keyValue = this.$route.path;
    console.log(this.$route,'2222223333333333dddd')
    // console.log(menuData, "22222222222");
  }
};
</script>

<style lang="less" scoped>
// .sidebar-container {
//   transition: width 0.28s;
//   width: 180px !important;
//   height: 100%;
//   position: fixed;
//   font-size: 0px;
//   bottom: 0;
//   left: 0;
//   z-index: 1001;
//   overflow: hidden;

//   .horizontal-collapse-transition {
//     transition: 0s width ease-in-out, 0s padding-left ease-in-out,
//       0s padding-right ease-in-out;
//   }
//   .el-scrollbar {
//     height: 100%;
//   }
//   .scrollbar-wrapper {
//     overflow-x: hidden !important;
//     .el-scrollbar__view {
//       height: 100%;
//     }
//   }
//   .el-scrollbar__bar.is-vertical {
//     right: 0px;
//   }
//   .is-horizontal {
//     display: none;
//   }
//   a {
//     display: inline-block;
//     width: 100%;
//     overflow: hidden;
//   }
//   .el-menu {
//     border: none;
//     height: 100%;
//     width: 100% !important;
//   }
//   .is-active > .el-submenu__title {
//     color: #f4f4f5 !important;
//   }
// }

// ----------------
.iconfont {
  margin-right: 8px !important;
}
.el-menu {
  border-right: 0;
}
.bgcList {
  background-color: #ebf1fa !important;
}
.huiList {
  background-color: #fff !important;
}
.span {
  font-size: 16px !important;
  font-family: PingFang SC;
  font-weight: 400;
  color: #fff;
}
.num {
  display: inline-block;
  padding: 0 15px;
}
.el-scrollbar__wrap.default-scrollbar__wrap {
  overflow-x: hidden;
}

.aside {
  overflow: scroll;
  overflow-x: hidden;
}
.townlist {
  margin-left: 40px;
}

.flood {
  height: 50px;
  line-height: 50px;

  .flood-son {
    font-size: 20px;
    color: red;
    cursor: pointer;
  }
}
</style>
